<!-- 登录 -->
<template>
  <div class="bg-primary login-container">
    <!--背景色-->
    <div class="login-bg-color" />
    <!-- 登陆页 -->
    <q-card class="login-form">
      <q-card-section>
        <q-form @submit="submit" ref="userLoginForm" class="inner-container">
          <div class="header-title text-secondary text-weight-bold">
            <span>光伏运维系统</span>
          </div>
          <div class="row justify-between" style="width:90%;margin:0 auto;margin-top:1.8em;margin-bottom:0.7em;font-size:0.18em;">
            <span
              class="cursor-pointer"
              :class="loginShow == 1 ? 'text-black' : 'text-grey'"
              @click="loginClick(1)"
            >手机号登陆</span>
            <span
              class="cursor-pointer"
              :class="loginShow == 2 ? 'text-black' : 'text-grey'"
              @click="loginClick(2)"
            >公司账号登录</span>
          </div>
          <div v-if="loginShow == 1">
            <q-input
              :dense="dense"
              outlined
              lazy-rules
              placeholder="手机号/邮箱"
              v-model="loginForm.username"
              bg-color="white"
              :rules="[val => val && val.length > 0 || '请输入手机号/邮箱']"
            >
              <template v-slot:prepend>
                <q-icon name="person_outline" />
              </template>
            </q-input>

            <q-input
              :dense="dense"
              outlined
              :type="loginPass"
              lazy-rules
              placeholder="密码"
              v-model="loginForm.password"
              standout
              bg-color="white"
              bottom-slots
              :rules="[val => val && val.length > 0 || '请输入密码']"
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="isPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="showPwd"
                />
              </template>
            </q-input>
            <div class="set-pass-word row">
              <div class="remember-passWord col">
                <q-checkbox size="xs" v-model="loginForm.checked">记住密码</q-checkbox>
              </div>
              <q-space />
              <div class="remember-passWord col text-right">
                <a>忘记密码？</a>
              </div>
            </div>
            <q-btn
              size="17px"
              unelevated
              color="primary"
              type="submit"
              class="full-width borderRadius"
              :loading="loading"
              :dense="dense"
            >登录</q-btn>
          </div>
          <div v-else>
            <q-input
              :dense="dense"
              outlined
              lazy-rules
              placeholder="公司代码"
              v-model="loginFormTwo.company_code"
              bg-color="white"
              :rules="[val => val && val.length > 0 || '请输入公司代码']"
            >
              <template v-slot:prepend>
                <q-icon name="mdi-home-outline"/>
              </template>
            </q-input>
            <q-input
              :dense="dense"
              outlined
              lazy-rules
              placeholder="用户名"
              v-model="loginFormTwo.username"
              bg-color="white"
              :rules="[val => val && val.length > 0 || '请输入用户名']"
            >
              <template v-slot:prepend>
                <q-icon name="person_outline" />
              </template>
            </q-input>

            <q-input
              :dense="dense"
              outlined
              :type="loginPass"
              lazy-rules
              placeholder="密码"
              v-model="loginFormTwo.password"
              standout
              bg-color="white"
              bottom-slots
              :rules="[val => val && val.length > 0 || '请输入密码']"
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="isPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="showPwd"
                />
              </template>
            </q-input>
            <div class="set-pass-word row">
              <div class="remember-passWord col">
                <q-checkbox size="xs" v-model="loginFormTwo.checked">记住密码</q-checkbox>
              </div>
              <q-space />
              <div class="remember-passWord col text-right">
                <a>忘记密码？</a>
              </div>
            </div>
            <q-btn
              size="17px"
              unelevated
              color="primary"
              type="submit"
              class="full-width borderRadius gsSubmit"
              style="margin-top:-2.2em;"
              :loading="loading"
              :dense="dense"
            >登录</q-btn>
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      isPwd: true,
      loginForm: {
        username: '',
        password: '',
        expiration: '',
        checked: false
      },
      loginFormTwo: {
        company_code: '',
        username: '',
        password: '',
        expiration: '',
        checked: false
      },
      loading: false,
      loginShow: 1,
      loginPass: 'password'
    };
  },

  computed: {
    dense: () => {
      const screenWidth = window.screen.width
      if (screenWidth >= 1023) {
        return false
      } else {
        return true
      }
    },
    ...mapGetters(['isSuper'])
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        this.redirect = route.query && route.query.redirect
        if (route.query.change_username) {
          if (this.loginShow == 2) {
            localStorage.removeItem('time2_GFYW')
            localStorage.removeItem('usern2_GFYW')
            localStorage.removeItem('password2_GFYW')
            localStorage.removeItem('company_code2_GFYW')
          }else{
            localStorage.removeItem('time_GFYW')
            localStorage.removeItem('usern_GFYW')
            localStorage.removeItem('password_GFYW')
          }
        }
      }
    }
  },

  mounted() {
      // 记住密码
      var currentTime = new Date().getTime()
      var expirationTime = localStorage.getItem('time_GFYW') * 1
      var expirationTimeTwo = localStorage.getItem('time2_GFYW') * 1
      if (currentTime <= expirationTime) {
        this.loginForm.checked = true
        if (localStorage.getItem('usern_GFYW') && localStorage.getItem('password_GFYW')) {
          this.loginForm.username = localStorage.getItem('usern_GFYW')
          this.loginForm.password = localStorage.getItem('password_GFYW')
        }
      }else if(currentTime <= expirationTimeTwo){
        this.loginFormTwo.checked = true
        if (localStorage.getItem('usern2_GFYW') && localStorage.getItem('password2_GFYW')) {
          this.loginFormTwo.username = localStorage.getItem('usern2_GFYW')
          this.loginFormTwo.password = localStorage.getItem('password2_GFYW')
          this.loginFormTwo.company_code = localStorage.getItem('company_code2_GFYW')
        }
      } else {
        this.loginForm.checked = false
        this.loginFormTwo.checked = false
      }
      localStorage.setItem('superRouters_GFYW', JSON.stringify(this.$router.options.routes));
  },

  methods: {
    loginClick(val) {
      this.loginShow = val
      if(val == 2){
        this.loginFormTwo.company_code = localStorage.getItem('company_code2_GFYW')
      }
    },
    submit() {
      this.$router.push('/realTimeState')
      // if (this.loginShow == 1) {
      //   // 记住密码
      //   if (this.loginForm.checked) {
      //     var exdate = new Date() // 获取时间
      //     const time = exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 7) // 保存的天数
      //     localStorage.setItem('time_GFYW', time)
      //     localStorage.setItem('usern_GFYW', this.loginForm.username)
      //     localStorage.setItem('password_GFYW', this.loginForm.password)
      //   } else {
      //     localStorage.removeItem('time_GFYW')
      //     localStorage.removeItem('usern_GFYW')
      //     localStorage.removeItem('password_GFYW')
      //   }
      //   // 手机号登录
      //   this.$refs.userLoginForm.validate().then(success => {
      //     if (success) {
      //       this.loading = true;
      //       this.$store.dispatch('login/loginFun', this.loginForm).then(res => {
      //         // 登陆成功 跳转路由
      //         this.toInitPage()
      //         this.loading = false
      //       }).catch(_ => {
      //         if(_.message == 'Invalid token specified'){
      //           this.$q.notify({
      //             type: 'negative',
      //             position: 'top',
      //             message: '用户名不存在'
      //           })
      //         }
      //         this.loading = false
      //       })
      //     }
      //   })
      // } else {// 记住密码
      //   if (this.loginFormTwo.checked) {
      //     var exdate = new Date() // 获取时间
      //     const time = exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 7) // 保存的天数
      //     localStorage.setItem('time2_GFYW', time)
      //     localStorage.setItem('usern2_GFYW', this.loginFormTwo.username)
      //     localStorage.setItem('password2_GFYW', this.loginFormTwo.password)
      //     localStorage.setItem('company_code2_GFYW', this.loginFormTwo.company_code)
      //   } else {
      //     localStorage.removeItem('time2_GFYW')
      //     localStorage.removeItem('usern2_GFYW')
      //     localStorage.removeItem('password2_GFYW')
      //     localStorage.removeItem('company_code2_GFYW')
      //   }
      //   // 公司账号登录
      //   this.$refs.userLoginForm.validate().then(success => {
      //     if (success) {
      //       this.loading = true;
      //       this.$store.dispatch('login/loginFun', this.loginFormTwo).then(res => {
      //         // 登陆成功 跳转路由
      //         this.toInitPage()
      //         this.loading = false
      //       }).catch(_ => {
      //         if(_.message == 'Invalid token specified'){
      //           this.$q.notify({
      //             type: 'negative',
      //             position: 'top',
      //             message: '用户名不存在'
      //           })
      //         }
      //         this.loading = false
      //       })
      //     }
      //   })
      // }

    },
    toInitPage() {
      this.$nextTick(() => {
        this.$store.dispatch('login/getVisitMenu', this.isSuper).then(res => {
          if(localStorage.getItem('euworkShop_wechatPathTo') != null){
            let arr = localStorage.getItem('euworkShop_wechatPathTo').split('?')
            this.$router.push(arr[0])
          }else{
            let defaultPage
            defaultPage = res[2].url
            this.$router.push({ path: defaultPage })
          }
        })
      })
    },
    // 是否显示密码
    showPwd() {
      this.isPwd = !this.isPwd
      if (this.isPwd) {
        this.loginPass = 'password'
      } else {
        this.loginPass = ''
      }
    }
  }
}

</script>
<style lang='scss' scoped>
@media screen and (min-width: 1023px) {
  .login-container {
    font-size: 75px;
  }
}
@media screen and (max-width: 1023px) {
  .login-container {
    font-size: 40px;
  }
}
// 登录页样式
.login-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .login-bg-color {
    width: 7.733333em;
    height: 7.733333em;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/menuRouter/loginLeft.png");
  }
  .login-form {
    width: 6.666667em;
    height: 7.333333em;
    position: absolute;
    right: 1.333333em;
    top: 50%;
    margin-top: -3.666667em;
    background-color: rgba(255, 255, 255, 0.5);
    .inner-container {
      padding: 0.8em 0.533333em 0;
      .header-title {
        font-size: 0.36em;
        text-align: center;
      }
      .subtitle {
        font-size: 0.213333em;
        text-align: center;
        margin-bottom: 0.333333em;
      }
      .set-pass-word {
        height: 0.613333em;
        line-height: 0.613333em;
        .remember-passWord {
          font-size: 0.186667em;
        }
      }
    }
  }
  
}

@media (max-width: 1024px) {
  .login-form{
    height: 9.3em!important;
    top: 52%!important;
  }
  .gsSubmit{
    margin-top: 0px!important;
  }
}
</style>
